# 招聘者上传工作
<route lang="yaml">
meta:
  layout: layout_as
</route>

<template>
  <v-main class="w-50 mx-auto mt-15">
    <h1>招聘信息</h1>

    <v-form>
      <!-- 基本信息表单项 -->

      <v-row>
        <v-col>
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <h3>基本信息</h3>
        </v-col>
      </v-row>

      <v-row>
        <!-- 公司名称 -->
        <v-col>
          <v-text-field
              variant="outlined"
              :readonly="!isEditMode"
              prepend-icon="mdi-asterisk"
              v-model="baseInfo.name"
              label="公司名称"
          ></v-text-field>
        </v-col>
      </v-row>

      <!-- 公司地点 -->
      <v-row>
        <v-col>
          <v-select
              clearable
              variant="outlined"
              label="公司地点"
              :readonly="!isEditMode"
              prepend-icon="mdi-asterisk"
              v-model="baseInfo.place"
              :items="[
              '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏',
              '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西',
              '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '香港', '澳门', '台湾'
            ]"
          ></v-select>
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <h3>职位信息</h3>
        </v-col>
      </v-row>
      <!-- 职位信息表单项 -->
      <v-row>
        <!-- 岗位名称 -->
        <v-col>
          <v-text-field
              variant="outlined"
              :readonly="!isEditMode"
              clearable
              prepend-icon="mdi-asterisk"
              v-model="requireTitle"
              label="岗位名称"
          ></v-text-field>
        </v-col>
      </v-row>

      <!-- 薪资 -->
      <v-row>
        <v-col>
          <v-text-field
              variant="outlined"
              :readonly="!isEditMode"
              clearable
              prepend-icon="mdi-asterisk"
              v-model="titleSalary"
              label="薪资"
          ></v-text-field>
        </v-col>
      </v-row>

      <!-- 要求学历 -->
      <v-row>
        <v-col>
          <v-text-field
              variant="outlined"
              :readonly="!isEditMode"
              clearable
              prepend-icon="mdi-asterisk"
              v-model="requireEducation"
              label="要求学历"
          ></v-text-field>
        </v-col>
      </v-row>

      <!-- 岗位描述 -->
      <v-row>
        <v-col>
          <v-textarea
              variant="outlined"
              :readonly="!isEditMode"
              clearable
              prepend-icon="mdi-asterisk"
              v-model="requireDescription"
              label="岗位描述"
          >
          </v-textarea>
        </v-col>
      </v-row>

      <!-- 操作按钮 -->
      <v-row justify="center">
        <v-btn
            class="ma-2"
            color="error"
            dark
            @click="cancelEdit"
        >
          <v-icon left>mdi-close</v-icon>
          取消
        </v-btn>

        <v-btn
            class="ma-2"
            color="primary"
            dark
            v-if="isEditMode"
            @click="uploadJob"
        >
          <v-icon left>mdi-heart</v-icon>
          提交
        </v-btn>

        <v-btn
            class="ma-2"
            color="primary"
            dark
            v-else
            @click="startEdit"
        >
          <v-icon left>mdi-pencil</v-icon>
          编辑
        </v-btn>
      </v-row>
    </v-form>
  </v-main>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";

interface BaseInfo {
  name: string,
  place: string | null,
}

const baseInfo: BaseInfo = reactive({
  name: '公司名称',
  place: null,
});

// 其他职位信息
const requireTitle = ref('');
const titleSalary = ref('');
const requireEducation = ref('');
const requireDescription = ref('');

// 保存编辑前的值
const nochangeName = ref('');
const nochangePlace = ref('');
const nochangeRequireTitle = ref('');
const nochangeTitleSalary = ref('');
const nochangeRequireEducation = ref('');
const nochangeRequireDescription = ref('');

// 状态变量，用于表示当前是编辑还是提交状态
const isEditMode = ref(false);

// 取消编辑
const cancelEdit = () => {
  // 恢复数据为原始未修改的值
  baseInfo.name = nochangeName.value;
  baseInfo.place = nochangePlace.value;
  requireTitle.value = nochangeRequireTitle.value;
  titleSalary.value = nochangeTitleSalary.value;
  requireEducation.value = nochangeRequireEducation.value;
  requireDescription.value = nochangeRequireDescription.value;
  // 将 isEditMode 设为 false，界面切换到提交状态
  isEditMode.value = false;
};

// 开始编辑
const startEdit = () => {
  nochangeName.value = baseInfo.name;
  nochangePlace.value = baseInfo.place;
  nochangeRequireTitle.value = requireTitle.value;
  nochangeTitleSalary.value = titleSalary.value;
  nochangeRequireEducation.value = requireEducation.value;
  nochangeRequireDescription.value = requireDescription.value;
  // 将 isEditMode 设为 true，界面切换到编辑状态
  isEditMode.value = true;
};

// 处理上传招聘信息的函数
const uploadJob = () => {
  const userEmail = localStorage.getItem('userEmail'); // 获取登录用户邮箱
  const company = baseInfo.name; // 获取公司名称
  const companyAddress = baseInfo.place; // 获取公司地点
  const requireTitleValue = requireTitle.value; // 获取岗位名称
  const titleSalaryValue = titleSalary.value; // 获取薪资
  const requireEducationValue = requireEducation.value; // 获取要求学历
  const requireDescriptionValue = requireDescription.value; // 获取岗位描述

  // 创建 FormData 对象，用于包含表单数据
  const formData = new FormData();
  formData.append('user_email', userEmail);
  formData.append('company', company);
  formData.append('company_address', companyAddress);
  formData.append('requiew_title', requireTitleValue);
  formData.append('title_salary', titleSalaryValue);
  formData.append('require_education', requireEducationValue);
  formData.append('require_discription', requireDescriptionValue);

  fetch('http://127.0.0.1:8000/upload_job', {
    method: 'POST', // 指定请求方法为 POST
    body: formData, // 将 FormData 对象作为请求体
  })
      .then(response => response.text()) // 处理响应为文本格式
      .then(data => {
        alert(data); // 显示后端返回的消息
      })
      .catch(error => {
        console.error('Error:', error); // 捕获并显示错误信息
      });

  // 切换为非编辑状态
  isEditMode.value = false;
};

// 监听滚动事件
onMounted(() => {
  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    const offsetHeight = document.body.offsetHeight;
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    bottomElev.value = scrollY + clientHeight >= offsetHeight ? 0 : 5;
  });
});
</script>

<style scoped>
</style>
